//邮件组管理
import { Button, Form, Input, Table, Pagination, Space, Modal, Switch } from 'antd';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import { useEffect, useState, FC, ReactNode, } from 'react';
import type { ColumnsType } from 'antd/lib/table';
import { Link, Navigate } from 'react-router-dom';
import '../index.css'
import { host2 } from '../../../../utils/api';
import http from '../../../../utils/axios';

interface DataType {

  magId: number;//序号
  magCode: string;  //邮件组代号
  magName: string;//邮件组名称,
  magExplain: string;//邮件组说明,
  userId: number;//操作人
  magUpdateLastTime: string;//更新时间
}

const MailManagement: FC = () => {
  const [form] = Form.useForm();
  const [datas, setData] = useState()
  const getDatas = () => {
    http({
      url: host2 + "/shiro/mailgroup/select",
      method: 'get',
      data: {
        // magId: 1,
        // magCode: "A001",
      }
    }).then((res) => {

      console.log(res.data);
      if (res.data.code == 200) {
        console.log('成功请求数据');
        setData(res.data.data)


      }
    }).catch()
  }
  useEffect(() => { getDatas() }, [])
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true)

  };
  // const editor = () => {


  // }
  const selectname = () => { }
  const resetit = () => { }
  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      align: 'center',
      dataIndex: 'magId',

    },

    {
      title: '邮件组代号',
      dataIndex: 'magCode',
      align: 'center',
    },
    {
      title: '邮件组名称',
      dataIndex: 'magName',
      align: 'center',
    },

    {
      title: '邮件组说明',
      dataIndex: 'magExplain',
      align: 'center',
    },
    {
      title: '操作人',
      dataIndex: 'userId',
      align: 'center',
    },
    {
      title: '更新时间',
      dataIndex: 'magUpdateLastTime',
      align: 'center',
    },
    {
      title: '操作',
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          {/* <span onClick={editor}>编辑</span> */}
          <Link to='/home/mailEditor'>编辑</Link>

        </Space>
      ),

    },

  ]
  // const data: DataType[] = [
  //   {
  //     key: '1',
  //     emallNumber: 'A001',
  //     emallName: '不合格信息通知',
  //     emallMessage: '入厂检验不合格品信息通知',
  //     operator: '枫叶',
  //     startTime: '2021/6/1 12:12',
  //   },
  //   {
  //     key: '2',
  //     emallNumber: 'A001',
  //     emallName: '不合格信息通知',
  //     emallMessage: '入厂检验不合格品信息通知',
  //     operator: '枫叶',
  //     startTime: '2021/6/1 12:12',
  //   },
  //   {
  //     key: '3',
  //     emallNumber: 'A002',
  //     emallName: '不合格信息通知',
  //     emallMessage: '入厂检验不合格品信息通知',
  //     operator: '枫叶',
  //     startTime: '2021/6/1 12:12',
  //   },
  //   {
  //     key: '4',
  //     emallNumber: 'A003',
  //     emallName: '不合格信息通知',
  //     emallMessage: '入厂检验不合格品信息通知',
  //     operator: '枫叶',
  //     startTime: '2021/6/1 12:12',
  //   },

  // ];

  return <>
    {/* 邮件组管理  */}
    {/* 搜索，查询框 */}
    <Form form={form} layout="inline" className='btnStyel'>
      <Form.Item >邮件组代号:<Input className='inp' /></Form.Item>
      <Form.Item >邮件组名称:<Input className='inp' /></Form.Item>
      <Form.Item><Button icon={<SearchOutlined />} style={{ borderColor: 'rgb(2,167,240)', color: 'rgb(2,167,240)' }} onClick={selectname}>查询</Button></Form.Item>
      <Form.Item><Button icon={<RedoOutlined />} style={{ borderColor: 'rgb(245,154,35)', color: 'rgb(245,154,35)' }} onClick={resetit}>重置</Button></Form.Item>
    </Form>
    <div><Button style={{ margin: '0.25rem' }} type="primary" onClick={showModal}>+新增</Button></div>
    <Table

      columns={columns}
      dataSource={datas}
      bordered
      pagination={false}
      // scroll={{ x: 2300 }}
      rowKey={(record) => { return record.magId }}
    />
    {/* 分页 */}
    <Pagination
      total={85}
      showSizeChanger
      showQuickJumper
    // showTotal={total => `总共 ${total}页`}
    />
    <Modal title="新增角色" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
      <Form
        labelCol={{ span: '7' }}
        wrapperCol={{ span: '14' }}>
        <Form.Item label="邮件组代号">
          <Input />
        </Form.Item>
        <Form.Item label="邮件组名称">
          <Input />
        </Form.Item>
        <Form.Item label="邮件组说明">
          <Input />
        </Form.Item>
        <Form.Item label="操作人">
          <Input />
        </Form.Item>

      </Form>
    </Modal>
  </>
}

export default MailManagement